<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
    <%@ page import="com.lp.cfg.ProConfig"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
            <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
                <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
                    <!DOCTYPE html>
                    <html>

                    <head>
                        <title>个人中心</title>
                        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
                        <meta content="yes" name="apple-mobile-web-app-capable" />
                        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
                        <meta content="telephone=no" name="format-detection" />
                        <%@ include file="/WEB-INF/wechat/iot/common/resource_lib.jsp"%>
                            <script type="text/javascript" src="<%=basePath%>/lib/bigscreen/js/vue.min.js"></script>
                            <script type="text/javascript" src="<%=basePath%>/lib/element-ui/index.js"></script>
                            <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/element-ui/index.css" />

                            <link type="text/css" href="<%=basePath%>/css/wechat/iot/personal.css?<%=v%>" rel="stylesheet" />
                            <style type="text/css">
                                p.weui-tabbar__label {
                                    color: #999 !important;
                                }
                                
                                .weui-tabbar__icon {
                                    width: 24px;
                                    height: 24px;
                                }
                                
                                .weui-tabbar__icon.active img.active {
                                    display: block;
                                }
                                
                                .weui-tabbar__icon.active img {
                                    display: none;
                                }
                                
                                .weui-tabbar__icon img {
                                    display: block;
                                }
                                
                                .weui-tabbar__icon img.active {
                                    display: none;
                                }
                                
                                .righttip {
                                    margin-right: 20px;
                                    color: #999 !important;
                                    font-size: 0.75rem !important;
                                    margin-top: 2px;
                                }
                                
                                .toast,
                                .code {
                                    overflow: hidden;
                                    position: absolute;
                                    top: 0;
                                    width: 100%;
                                    height: 100%;
                                    z-index: 1000;
                                    transform: translateX(-100%);
                                    transition: all 400ms cubic-bezier(.8, 0, .33, 1);
                                    display: flex;
                                    flex-direction: column;
                                }
                                
                                .toast.nav-open,
                                .code.nav-open {
                                    transform: translateX(0px);
                                    border-radius: 0% 0% 0% 0%;
                                    background: #f2f2f2;
                                }
                            </style>
                    </head>

                    <body>

                        <div class="container">

                            <section class="aui-flexView">
                                <div style="width: 100%;height: 30px;">
                                </div>
                                <section class="aui-scrollView">
                                    <div class="aui-take-content">
                                        <div class="aui-take-content-col">
                                            <div class="aui-img-logo">
                                                <c:if test="${user.wx_img_url != null }">
                                                    <img src="${user.wx_img_url }">
                                                </c:if>
                                                <c:if test="${user.wx_img_url == null }">
                                                    <img src="<%=basePath%>/image/wechat/iot/default_logo.jpg">
                                                </c:if>
                                            </div>
                                            <div class="aui-img-text">
                                                <h2>
                                                    <c:if test="${user.nick_name != null && user.nick_name!='' }">
                                                        ${user.nick_name}
                                                    </c:if>
                                                    <c:if test="${user.nick_name == null || user.nick_name==''  }">
                                                        ${user.name}
                                                    </c:if>

                                                </h2>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="divHeight"></div>
                                    <div class="aui-course-list">
                                        <a href="<%=basePath%>/service/wiot/mscene" class="aui-flex">
                                            <div class="aui-cou-img">
                                                <img src="<%=basePath%>/image/wechat/iot/icon-li-001.png" alt="">
                                            </div>
                                            <div class="aui-flex-box">
                                                <p>Project information</p>
                                            </div>
                                        </a>
                                        <c:if test="${user.type != 7 }">
                                            <a href="<%=basePath%>/service/wiot/maccount" class="aui-flex">
                                                <div class="aui-cou-img">
                                                    <img src="<%=basePath%>/image/wechat/iot/icon-li-003.png" alt="">
                                                </div>
                                                <div class="aui-flex-box">
                                                    <p class="float-left">sub-account</p>
                                                    <p class="float-right righttip">${info.data}</p>
                                                </div>
                                            </a>
                                        </c:if>
                                        <a href="<%=basePath%>/service/wiot/euser" class="aui-flex">
                                            <div class="aui-cou-img">
                                                <img src="<%=basePath%>/image/wechat/iot/icon-li-004.png" alt="">
                                            </div>
                                            <div class="aui-flex-box clear">
                                                <p class="float-left">Personal information</p>
                                                <p class="float-right righttip">edit</p>
                                            </div>
                                        </a>
                                        <a href="javascript:void(0)" class="aui-flex code-edit">
                                            <div class="aui-cou-img">
                                                <img src="<%=basePath%>/image/wechat/iot/icon-li-004.png" alt="">
                                            </div>
                                            <div class="aui-flex-box clear">
                                                <p class="float-left">Adding a clone device</p>
                                                <p class="float-right righttip">Select</p>
                                            </div>
                                        </a>
                                        <a href="javascript:void(0)" class="aui-flex user-edit">
                                            <div class="aui-cou-img">
                                                <img src="<%=basePath%>/image/wechat/iot/icon-li-004.png" alt="">
                                            </div>
                                            <div class="aui-flex-box clear">
                                                <p class="float-left">Change password</p>
                                                <p class="float-right righttip">edit</p>
                                            </div>
                                        </a>
                                        <a href="javascript:void(0)" class="aui-flex device-bind">
                                            <div class="aui-cou-img">
                                                <img src="<%=basePath%>/image/wechat/iot/icon-li-004.png" alt="">
                                            </div>
                                            <div class="aui-flex-box clear">
                                                <p class="float-left">Device Bind</p>
                                                <p class="float-right righttip">bind</p>
                                            </div>
                                        </a>
                                        <a href="javascript:void(0);" class="aui-flex bindurl">
                                            <div class="aui-cou-img">
                                                <img src="<%=basePath%>/image/wechat/iot/icon-li-005.png" alt="">
                                            </div>
                                            <div class="aui-flex-box">
                                                <p class="float-left">Controls</p>
                                                <p class="float-right righttip user-bind">quit</p>
                                            </div>
                                        </a>
                                    </div>

                                </section>
                            </section>

                        </div>
                        <div id="vue" class="vue">
                        	<div class="toast" id="toast">
                            <div style="margin: 30% auto 10px;font-size: 26px;">Change password</div>
                            <el-form :model="ruleForm" status-icon label-width="70px" class="demo-ruleForm" style="margin:120px 30px;">
                                <el-form-item label="password">
                                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" style="width:95%"></el-input>
                                </el-form-item>
                                <el-form-item label="Confirm">
                                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width:95%"></el-input>
                                </el-form-item>
                                <el-form-item style="margin:50px 0;">
                                    <el-button @click="vabtn">Cancel</el-button>
                                    <el-button type="primary" @click="onSubmit(ruleForm)">submit</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div style="display:flex;flex-direction: column;" class="code">
                            <div style="margin: 100px auto;font-size: 20px;color: blue;font-weight: 550;">Cloning device</div>
                            <el-form style="margin: 0 20px 0 0;" :model="form" :rules="rules" ref="form" label-width="120px">
                                <!-- <el-form-item label="组态名称">
                                    <el-input v-model="form.name"></el-input>
                                </el-form-item> -->
                                <el-form-item label="Bind device">
                                    <el-select v-model="form.scene_id" placeholder="Please select device group" prop="scene_id">
                                        <el-option v-for="scene in scenelist" :label="scene.name" :value="scene.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="Device name" prop="name">
                                    <el-input type="text" v-model="form.name"></el-input>
                                </el-form-item>
                                <el-form-item label="Device SN" prop="device_code">
                                    <el-input type="text" v-model="form.device_code"></el-input>
                                </el-form-item>
                                <el-form-item label="Template SN" prop="copy_device_code">
                                    <!-- <el-select v-model="form.region" placeholder="请选择组态模板">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select> -->
                                    <el-input type="text" v-model="form.copy_device_code" placeholder="Device SN you want to clone"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="btn('form')">Create now</el-button>
                                    <el-button @click="cancel">Cancel</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        </div>
                        <%@ include file="/WEB-INF/wechat/iot/moudle/operate.jsp"%>

                    </body>
                    <script src="<%=basePath%>/lib/weixinLib/WeixinApi.js"></script>
                    <script type="text/javascript">
                        $(".weui-tabbar .weui-tabbar__icon").eq(3).addClass("active");

                        var flag = WeixinApi.openInWeixin();
                        if (!flag) {
                            // alert("请在微信浏览器中打开");
                        } else {
                            $(".user-bind").html("Switch account");
                        }

                        $(".user-bind").click(function() {
                            localStorage.removeItem("auto");
                            forward('/user/logout?type=1');
                        })
                        $(".user-edit").click(function() {
                            var toast = document.querySelector('.toast')
                            toast.classList.toggle('nav-open');
                        })
                        $(".code-edit").click(function() {
                            var toast = document.querySelector('.code')
                            toast.classList.toggle('nav-open');
                        })
                        $(".device-bind").click(function() {
                            forward('/wiot/deviceBind');
                        })
                        var app = new Vue({
                            el: '#vue',
                            data() {
                                return {
                                    form: {
                                        name: '',
                                        device_code: '',
                                        copy_device_code: '',
                                        scene_id: ''
                                    },
                                    ruleForm: {
                                        pass: '',
                                        checkPass: ''
                                    },
                                    scenelist: [],
                                    rules: {
                                        name: [
                                          { required: true, message: 'Please enter the device name', trigger: 'blur' }
                                        ],
                                        scene_id: [
                                          { required: true, message: 'Please select device group', trigger: 'change' }
                                        ],
                                        copy_device_code: [
                                            { required: true, message: 'Please fill in the template number', trigger: 'blur' }
                                          ],
                                        device_code: [
                                          { required: true, message: 'Please fill in the device number', trigger: 'blur' }
                                        ]
                                      }
                                }
                            },

                            //user{password = ?}
                            methods: {
                                onSubmit(from) {
                                    if (from.pass == '') {
                                        alert('The password cannot be empty')
                                        return
                                    }
                                    if (from.pass != from.checkPass) {
                                        alert('Password inconsistency')
                                        this.ruleForm = {
                                            pass: '',
                                            checkPass: ''
                                        }
                                        return
                                    } else {
                                        commonAjax('post', localUrl + "/api/user/resetPassword", {
                                            "password": from.pass
                                        }, function(data) {
                                            if (data.status == 1) {
                                                forward('/user/logout?type=1')
                                            }
                                            if (data.status == 2) {
                                                this.ruleForm = {
                                                    pass: '',
                                                    checkPass: ''
                                                }
                                                alert("Modification failure");
                                            }
                                        })
                                    }
                                },
                                vabtn() {
                                    var toast = document.querySelector('.toast')
                                    toast.classList.toggle('nav-open');
                                },
                                btn(formName) {
                                	 var that = this
                                	 that.$refs[formName].validate((valid) => {
                                        if (valid) {
                                        	if(!that.form.scene_id){
                                                alert('Please select device group')
                                                return
                                            }else{
                                            	commonAjax('post', localUrl + "/api/node/copyNode", that.form, function(data) {
                                                    if (data.status == 2) {
                                                    	that.form = {
                                                        		name: '',
                                                                device_code: '',
                                                                copy_device_code: '',
                                                                scene_id: ''
                                                                    }
                                                        alert("Successful selection");
                                                        var app = document.querySelector('.code')
                                                        app.classList.toggle('nav-open');
                                                        
                                                    }else{
                                                        alert(data.statusMsg)
                                                        }
                                                })
                                               }
                                        } else {
                                        	alert('Please complete')
                                          return false;
                                        }
                                      });
                                },
                                cancel() {
                                    var app = document.querySelector('.code')
                                    app.classList.toggle('nav-open');
                                    this.form = {
                                    		name: '',
                                            device_code: '',
                                            copy_device_code: '',
                                            scene_id: ''
                                                }
                                },
                                // 获取设备组
                                getScene() {
                                    var that = this
                                    $.ajax({
                                        type: "get",
                                        url: localUrl + "/api/scene/getScenes",
                                        dataType: "json",
                                        success: function(res) {
                                            // 这是请求成功
                                            if (res.status == 1) {
                                                that.scenelist = res.scenes
                                            }
                                        },
                                        error: function(err) {

                                        }
                                    });
                                },
                            },
                            mounted() {
                                this.getScene()
                            },
                        })
                    </script>

                    </html>